<template>
  <div>
    <a-list :grid="{ gutter: 16, column: 4 }" :data-source="data">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :title="item.title + '(LuLu)'">
          <div class="Task_Content">
            <div>发布时间：{{ item.createTime }}</div>
            <div>结束时间：{{ item.endTime }}</div>
            <div>
              完成状态：
              <a-tag v-if="item.status" color="green">完成</a-tag>
              <a-tag v-else color="red"> 未完成 </a-tag>
            </div>
            <div>
              <a-button type="primary" @click="showTestTab(item)">
                开始测试
              </a-button>
            </div>
          </div>
        </a-card>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      data: [],
    };
  },
  methods: {
    ...mapMutations("Group", ["addPanesData", "setTopics"]),
    //显示测试页面
    showTestTab(data) {
      if (!this.isTestPage) {
        this.addPanesData(data);
        this.getTestTopic(this.testKey);
      } else this.$message.warning("您已经存在了一个测试页面");
    },
    getTest() {
      this.$api.GetExercise().then(({ data }) => {
        //获取当前小组的测试数据
        this.data = data.result.map((item) => {
          return {
            key: item.id,
            createTime: item.createTime,
            endTime: item.endTime,
            title: item.name,
            status: false, //完成状态
          };
        });
      });
    },
    getTestTopic(id) {
      this.$api.StudentGetTopicsByExerciseID({ id }).then(({ data }) => {
        var tempTopics = data.result.map((item) => {
          return {
            id: item.id,
            topic: item.name,
            isStatus: false,
            isActive: false,
            answer: "",
          };
        });
        tempTopics[0].isActive = true;
        this.setTopics(tempTopics);
      });
    },
  },
  computed: {
    ...mapState("Group", ["isTestPage", "testKey"]),
  },
  created() {
    this.getTest();
  },
};
</script>

<style lang="less">
.ant-list {
  width: 80%;
  margin: 0 auto;
  .ant-card-body {
    padding: 10px;
    .Task_Content {
      div {
        padding: 1%;
        &:nth-last-child(1) {
          display: flex;
          flex-direction: row-reverse;
          .ant-btn-primary {
            background-color: #7b9e31;
            border: none;
          }
        }
      }
    }
  }
}
</style>